<template>
  <div class="app-container">
    <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="formInline" label-width="100px">
          <el-form-item>
            <el-button type="primary" @click="handleAdd">新增供货商</el-button>
          </el-form-item>
          <el-form-item label="供货商ID">
            <el-input v-model="formInline.KeyWord" placeholder="关键字搜索"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="PurchaseGetSupplierList()">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-table :data="SupplierList" border style="width: 100%" v-loading="listLoading">
        <!--:summary-method="getSum"-->
        <el-table-column prop="SupplierId" label="供货商ID" align="center"></el-table-column>
        <el-table-column prop="SupplierName" label="供货商名称" align="center"></el-table-column>
        <el-table-column prop="PyCode" label="助记码" align="center"></el-table-column>
        <el-table-column prop="SupplierMoblie" label="联系方式" align="center"></el-table-column>
        <el-table-column prop="SupplierAddress" label="地址" align="center"></el-table-column>
        <!-- <el-table-column label="商品" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="success" @click="PurchaseOrderProductList(scope.row.SupplierId)">查看</el-button>
          </template>
        </el-table-column>-->
        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
              type="danger"
              v-if="scope.row.Status==0"
              v-on:click="handleDelte(scope.row.SupplierId)"
            >禁用</el-button>
            <el-button
              type="info"
              size="small"
              v-if="scope.row.Status==2"
              v-on:click="handleShow(scope.row.SupplierId)"
            >启用</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--编辑界面-->
      <el-dialog title="编辑" :visible.sync="editFormVisible">
        <el-form :model="editForm" label-width="150px" ref="editForm">
          <el-form-item label="供货商名称" prop="SupplierName">
            <el-input v-model="editForm.SupplierName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="付款方式" prop="FreightPayer">
            <el-select
              v-model="editForm.FreightPayer"
              filterable
              placeholder="请选择付款方式"
              @change="getFreightPayer"
            >
              <el-option
                v-for="item in FreightPayerList"
                :key="item.FreightPayerId"
                :label="item.FreightPayerName"
                :value="item.FreightPayerId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" prop="SupplierMoblie">
            <el-input
              v-model="editForm.SupplierMoblie"
              auto-complete="off"
              maxlength="11"
              onkeyup="value=value.replace(/[^\d]/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="SupplierAddress">
            <el-input v-model="editForm.SupplierAddress" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="editFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="editSubmit()">提交</el-button>
        </div>
      </el-dialog>
      <!--新增界面-->
      <el-dialog title="新增" :visible.sync="addFormVisible">
        <el-form :model="addForm" label-width="150px" ref="addForm">
          <el-form-item label="供货商名称" prop="SupplierName">
            <el-input v-model="addForm.SupplierName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="付款方式" prop="FreightPayer">
            <el-select
              v-model="addForm.FreightPayer"
              filterable
              placeholder="请选择付款方式"
              @change="getFreightPayer"
            >
              <el-option
                v-for="item in FreightPayerList"
                :key="item.FreightPayerId"
                :label="item.FreightPayerName"
                :value="item.FreightPayerId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号码" prop="SupplierMobile">
            <el-input
              v-model="addForm.SupplierMobile"
              auto-complete="off"
              maxlength="11"
              onkeyup="value=value.replace(/[^\d]/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="SupplierAddress">
            <el-input v-model="addForm.SupplierAddress" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="addFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="addSubmit()">提交</el-button>
        </div>
      </el-dialog>

      <el-pagination
        background
        layout=" prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total"
        style="float:right;margin-top: 10px;"
      ></el-pagination>
    </section>
  </div>
</template>

<script>
import {
  PurchaseGetSupplierList,
  PurchaseAddSupplier,
  PurchaseUpdateSupplier,
  PurchaseSwitchSupplier
} from "@/api/api";
import Config from "../../api/config";
export default {
  data() {
    return {
      SupplierList: [],
      FreightPayerList: [
        {
          FreightPayerId: 1,
          FreightPayerName: "货到付款"
        },
        {
          FreightPayerId: 2,
          FreightPayerName: "先付款"
        }
      ],
      listLoading: false,

      editFormVisible: false,
      editForm: {},
      lookFormVisible: false,
      addFormVisible: false,
      addForm: {},
      page: 1,
      pageSize: 20,
      total: 0,
      formInline: {
        KeyWord: ""
      }
    };
  },
  created() {
    this.PurchaseGetSupplierList();
  },
  methods: {
    //关闭页面
    // handleClose(done) {
    //   this.lookFormVisible = false;
    //   (this.formInline.page = 1),
    //     (this.formInline.pageSize = 20),
    //     this.PurchaseGetSupplierList();
    // },

    //禁用会员
    handleDelte(SupplierId) {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        SupplierId: SupplierId,
        Status: 1
      };
      PurchaseSwitchSupplier(para).then(res => {
        console.log(res);
        if (res.Status == 1) {
          self.total = res.Data.TotalCount;
        }
        self.PurchaseGetSupplierList();
      });
    },

    //启用会员
    handleShow(SupplierId) {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        SupplierId: SupplierId,
        Status: 0
      };
      PurchaseSwitchSupplier(para).then(res => {
        console.log(res);
        if (res.Status == 1) {
          self.total = res.Data.TotalCount;
        }
        self.PurchaseGetSupplierList();
      });
    },

    //获取供货商列表
    PurchaseGetSupplierList() {
      var self = this;
      console.log(self);
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: this.pageSize,
        KeyWord: this.formInline.KeyWord
      };
      console.log(para);
      PurchaseGetSupplierList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log(vdata);
          self.SupplierList = vdata.DataList;
          self.total = vdata.TotalCount;
        }
      });
    },

    getSupplierID(val) {
      this.formInline.SupplierName = val;
      console.log(this.formInline.SupplierName);
    },
    getFreightPayer(val) {
      this.addForm.FreightPayer = val;
      console.log(this.addForm.FreightPayer);
    },
    //添加供货商
    addSubmit() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        SupplierName: this.addForm.SupplierName,
        FreightPayer: this.addForm.FreightPayer,
        SupplierMoblie: this.addForm.SupplierMoblie,
        SupplierAddress: this.addForm.SupplierAddress
      };
      PurchaseAddSupplier(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          self.addFormVisible = false;
          self.PurchaseGetSupplierList();
          this.$message({
            message: res.data.Description,
            type: "success"
          });
        }
      });
      self.addFormVisible = false;
    },

    //编辑供货商
    editSubmit() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        SupplierId: this.editForm.SupplierId,
        SupplierName: this.editForm.SupplierName,
        FreightPayer: this.editForm.FreightPayer,
        SupplierMobile: this.editForm.SupplierMoblie,
        SupplierAddress: this.editForm.SupplierAddress
      };
      PurchaseUpdateSupplier(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          self.editFormVisible = false;
          self.PurchaseGetSupplierList();
          this.$message({
            message: res.data.Description,
            type: "success"
          });
        }
      });
      self.editFormVisible = false;
    },
    //显示新增界面
    handleAdd: function() {
      this.addFormVisible = true;
      this.addForm = {
        radio: 1
      };
    },
    //编辑
    handleEdit: function(row) {
      this.editFormVisible = true;
      this.editForm = Object.assign({}, row);
      console.log("++++++++", this.editForm);
    },

    handleChange(value) {
      console.log(value);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.PurchaseGetSupplierList();
    }
  }
};
</script>

<style>
</style>